<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-2.1.1.js"></script>
<script src="game.js"></script>
<link rel="stylesheet" type="text/css" href="css/schiffeversenken.css">
<title>Schiffeversenken gegen einen Computer</title>

</head>
<body>

<div>
<img id="hintergrund" src="images/pergament.gif" alt="" title="" />
</div>

<div id="scrollbereich">
	<center>
		  <form id=login name=login action="javascript:init()">
		    <h3>Schiffeversenken gegen den Computer</h3>
		    <p>
		    <label>Bitte gib deinen Namen ein:</label><br>
		    <input type=text name=nickname size=10>
		    <input type=button id="loginButton" value=OK onClick="init()"><br>
		    </p>
		    <p>
		    <label>Schwierigkeit:</label><br>
		    <select name=difficulty>
		      <option value=20 selected="selected">einfach</option>
		      <option value=10>mittel</option>
		      <option value=5>schwer</option>
		    </select>
		    </p>
		  </form>
	</center>
	
	<center id="spielfeld" style="display:none"> 
		<table>
			<tr>
				<td align=center><p class='heading'>Die feindliche Flotte</p></td>
				<td width='50' />
				<td align=center><p class='heading' id="nametag">Deine Flotte</p></td>
			</tr>
			<tr>
				<td>
					<div id="aigrid"></div>
				</td>
				<td width='50' />
				<td>
					<div id="playergrid"></div>
				</td>
			</tr>
		</table>
		<h2 id="status">Um das Spiel zu beginnen platziere alle deine Schiffe</h2>
	</center>
</div>

</body>
</html>